<template>
  <div class="mb20">
    <jxf-titletip :title="'详情'" :hasRefresh="false" :hasGoBack="true"
                  @goBack="$emit('update:showProdDetail', false)"></jxf-titletip>
    <div v-show="!isEdit" class="mb20">
      <el-card class="mt20">
        <div slot="header">
          <span>商品信息</span>
          <div>
            <el-button type="primary" @click="showUpdateProductStatus">强制下架</el-button>
            <el-button type="primary" @click="editInfo">编辑</el-button>
          </div>
        </div>
        <jxf-datalist :info="productInfoList">
          <template slot="image" slot-scope="scope">
            <img :src="scope.info.value" alt="" style="width: 50px;height: 50px;">
          </template>
        </jxf-datalist>
      </el-card>
      <el-card class="mt20">
        <div slot="header">
          <span>价格模板</span>
        </div>
        <jxf-table :table="templateInfoList">
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="showAllPriceTemplate(scope.row)">查看全部</el-button>
          </template>
        </jxf-table>
      </el-card>
      <PriceTemplateModel ref="PriceTemplateModel" :isShowDetail.sync="isShowModel" :url="modelUrl"></PriceTemplateModel>
    </div>
    <div v-show="isEdit">
      <el-card class="mt20">
        <div slot="header">
          <span>商品信息</span>
          <div>
            <el-button type="primary" @click="showUpdateProductStatus">强制下架</el-button>
            <el-button type="primary" @click="isEdit = false">取消编辑</el-button>
          </div>
        </div>
        <el-form :model="productEditInfo" :rules="rules" ref="ruleForm" label-width="45%"
                 class="productEditInfo">
          <div class="form-content">
            <el-form-item label="商品图片:" prop="picUrl">
              <div class="imgBlock" @click="isUploadImg = true">
                <img v-if="productEditInfo.picUrl !== ''" :src="productEditInfo.picUrl" alt="">
                <div v-else><i class="c-gray el-icon-plus"></i></div>
              </div>
            </el-form-item>

            <el-form-item label="商品名称:" prop="productName">
              <el-input v-model="productEditInfo.productName"></el-input>
            </el-form-item>
            <el-form-item label="标准名称:" prop="standardName">
              <el-input v-model="productEditInfo.standardName"></el-input>
            </el-form-item>
            <el-form-item label="所属城市:">
              <span>{{productEditInfo.city}}</span>
            </el-form-item>
            <el-form-item label="供应商名称:">
              <span>{{productEditInfo.enterpriseName}}</span>
            </el-form-item>
            <el-form-item label="商品分类:">
              <span>{{productEditInfo.classifyName}}</span>
            </el-form-item>
            <el-form-item label="规格:" prop="specifications">
              <el-input v-model="productEditInfo.specifications"></el-input>
              <br>
              <span class="c-gray">例：箱/6瓶/250ml</span>
            </el-form-item>
            <el-form-item label="产地:" prop="productAddress">
              <el-input v-model="productEditInfo.productAddress"></el-input>
            </el-form-item>
            <el-form-item label="品牌:" prop="brand">
              <el-input v-model="productEditInfo.brand"></el-input>
            </el-form-item>
            <el-form-item label="生产商:" prop="producer">
              <el-input v-model="productEditInfo.producer"></el-input>
            </el-form-item>
            <el-form-item label="备注信息:" prop="remark">
              <el-input v-model="productEditInfo.remark"></el-input>
            </el-form-item>
            <el-form-item label="标准售价（元）:" prop="price">
              <span>{{productEditInfo.price}}</span>
            </el-form-item>
            <el-form-item label="商品描述:" prop="description">
              <el-input type="textarea" v-model="productEditInfo.description"
                        :autosize="{ minRows: 3, maxRows: 5}"></el-input>
            </el-form-item>
            <el-form-item label="销售状态:">
              <span>{{this.status}}</span>
            </el-form-item>
          </div>
        </el-form>
        <div class="mt20 mb20 text-center">
          <el-button type="info" @click="isEdit = false">取消</el-button>
          <el-button type="primary" @click="onsubmit('ruleForm')">保存</el-button>
        </div>
      </el-card>
      <jxf-cropper :isShowCropper.sync="isUploadImg" :dealImage="productEditInfo.picUrl" :uploadUrl="uploadUrl"
                   @getChangedImage="updateProductImg"></jxf-cropper>
    </div>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  import formatMoney from '@/assets/js/formatMoney'
  import PriceTemplateModel from './PriceTemplateModel'
  export default {
    name: "ShowAuditProductDetail",
    components: { PriceTemplateModel },
    props: {
      showProdDetail: {
        type: Boolean,
        default: false
      },
      shopTypeIdList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        isEdit: false,
        isShowModel: false,
        productInfo: {},
        status: "",
        productInfoList: [],
        templateInfoList: {},
        modelUrl: apis.productAudit.getPriceTemplateist,
        formatMoney: formatMoney,
        isUploadImg: false,
        uploadUrl: apis.product.uploadImg,
        productEditInfo: {},
        rules: {
          picUrl: [{required: true, message: '请上传商品主图', trigger: 'change'}],
          productName: [{required: true, message: '请输入商品名称', trigger: 'blur'},
            {validator: validate.length15, trigger: 'change'}],
          standardName: [{required: true, message: '请输入商品标准名称', trigger: 'blur'},
            {validator: validate.length30, trigger: 'change'}],
          specifications: [{required: true, message: '请输入商品规格', trigger: 'blur'},
            {validator: validate.length30, trigger: 'change'}],
          productAddress: [{validator: validate.length30, trigger: 'change'}],
          brand: [{validator: validate.length30, trigger: 'change'}],
          producer: [{validator: validate.length30, trigger: 'change'}],
          remark: [{validator: validate.length50, trigger: 'change'}],
          description: [{validator: validate.length50, trigger: 'change'}]
        }
      }
    },
    methods: {
      // 专属价列表初始化
      initTemplateInfoList() {
        this.templateInfoList = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '模板名称',
              prop: 'templateName',
            },
            {
              id: '2',
              label: '价格',
              prop: 'agreementPrice'
            },
            {
              id: '3',
              label: '适用采购商',
              show: 'template',
              prop: 'operation'
            }],
          data: []
        }
      },
      getProductDetail(id) {
        ajax.get(apis.product.getProductById, {id: id})
          .then(res => {
            if (res.success === true) {
              if (res.data !== null) {
                this.productInfoList = this.formatshowData(res.data)
                if (res.data.templatePricePo !== []) {
                  this.templateInfoList.data = this.setTemplateInfoList(res.data.templatePricePo)
                } else {
                  this.templateInfoList.data = []
                }
                this.templateInfoList.loading = false
              }
            }
          })
      },
      // 商品展示数据处理
      formatshowData(item) {
        //强制下架参数备份
        this.productInfo = {
          productName: item.productName,
          enterpriseName: item.enterpriseName,
          id: item.id
        }
        this.status = (item.isShelf === 1 && item.status === 0) ? "待审核" : (item.isShelf === 1 && item.status === 5) ? "在售" : ""
        return [{
          //   label: "商品编号",
          //   value: item.productNo
          // }, {
          label: "商品图片",
          value: item.picUrl === null ? "": item.picUrl,
          type: "image"
        }, {
          label: "商品名称",
          value: item.productName === null ? "": item.productName
        }, {
          label: "标准名称",
          value: item.standardName === null ? "": item.standardName
        }, {
          label: "所属城市",
          value: item.city
        }, {
          label: "供应商名称",
          value: item.enterpriseName
        }, {
          label: "所属分类",
          value: item.firstClassifyName + " > " + item.secClassifyName + " > " + item.thiClassifyName
        }, {
          label: "规格",
          value: item.specifications === null ? "": item.specifications
        }, {
          label: "产地",
          value: item.productAddress === null ? "": item.productAddress
        }, {
          label: "品牌",
          value: item.brand === null ? "": item.brand
        }, {
          label: "生产商",
          value: item.producer === null ? "": item.producer
        }, {
          label: "备注信息",
          value: item.remark === null ? "": item.remark
        }, {
          label: "标准售价（元）",
          value: item.price
        }, {
          label: "商品描述",
          value: item.description === null ? "": item.description
        }, {
          label: "销售状态",
          value: this.status
        }, {
          label: "最后操作日志",
          value: formatDate.timeFormat(item.operateTime) + '   ' + item.userName + '(' + item.contact + '）  ' + item.operateContent
        }]
      },

      // 编辑
      editInfo(){
        this.isEdit = true
        this.productEditInfo = this.formatEditData()
      },
      showAllPriceTemplate(obj) {
        this.$refs['PriceTemplateModel'].init(obj)
        this.isShowModel = true
      },
      // 商品修改数据处理
      formatEditData() {
        return {
          id: this.productInfo.id,
          picUrl: this.productInfoList[0].value,
          productName: this.productInfoList[1].value,
          standardName: this.productInfoList[2].value,
          city: this.productInfoList[3].value,
          enterpriseName: this.productInfoList[4].value,
          classifyName: this.productInfoList[5].value,
          specifications: this.productInfoList[6].value,
          productAddress: this.productInfoList[7].value,
          brand: this.productInfoList[8].value,
          producer: this.productInfoList[9].value,
          remark: this.productInfoList[10].value,
          price: this.productInfoList[11].value,
          description: this.productInfoList[12].value,
          status: this.productInfoList[13].value
        }
      },
      // 专属价列表赋值
      setTemplateInfoList(info) {
        return info.map(item => {
          return {
            id: item.id,
            templateName: item.templateName,
            agreementPrice: item.agreementPrice ? this.formatMoney.twoDecimal(item.agreementPrice) : '0.00'
          }
        })
      },
      // 强制下架
      showUpdateProductStatus() {
        this.$emit('showUpdateProductStatus', this.productInfo)
      },
      // 商品图片修改
      updateProductImg(data) {
        this.productEditInfo.picUrl = data
      },
      // 修改提交
      onsubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateProduct()
          } else {
            return false;
          }
        });
      },
      // 商品信息修改
      updateProduct() {
        let info ={
          id: this.productEditInfo.id,
          picUrl: this.productEditInfo.picUrl,
          productName: this.productEditInfo.productName,
          standardName: this.productEditInfo.standardName,
          specifications: this.productEditInfo.specifications,
          productAddress: this.productEditInfo.productAddress,
          brand: this.productEditInfo.brand,
          producer: this.productEditInfo.producer,
          remark: this.productEditInfo.remark,
          description: this.productEditInfo.description
        }
        ajax.post(apis.productAudit.updateProductInform, info)
          .then(res => {
            if (res.success === true) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.isEdit = false
              this.getProductDetail(info.id)
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          })
      },
    },
    created() {
      this.initTemplateInfoList()
    }
  }
</script>

<style lang="scss" scoped>
  .imgBlock {
    & > div, & > img {
      cursor: pointer;
      width: 120px;
      height: 120px;
    }
    & > div {
      border: 1px solid #f3f3f3;
      text-align: center;
      line-height: 120px;
      i {
        font-size: 40px;
      }
    }
  }

  .productInfo {
    /*background-color: #f3f3f3;*/
    /*padding: 20px;*/
    .form-content {
      padding: 20px;
      background-color: #fff;
      .el-form-item {
        /*margin: 0 auto 20px;*/
        /*max-width: 400px;*/
      }
    }
  }

  .el-input, .el-textarea {
    max-width: 200px;
  }

</style>
